<template>
  <!-- <el-tooltip v-if="name && authorized" v-bind="ElTooltipProps"> -->
  <el-popconfirm
    v-if="name && authorized"
    @onConfirm="$emit('click', $event)"
    @confirm="$emit('click', $event)"
    v-bind="ElPopconfirmProps"
  >
    <el-button
      @click="onElButtonClick"
      slot="reference"
      class="auth-button"
      v-bind="ElButtonProps"
    >
      <template v-if="!isWithinTable">
        <span
          v-if="$scopedSlots.default && ![true, ''].includes($attrs.loading)"
        >
          <slot />
        </span>
        <span
          v-else-if="
            !presetFromCatalog.circle && ![true, ''].includes($attrs.loading)
          "
        >
          {{ name }}
        </span>
      </template>
      <template v-else>
        {{ name }}
      </template>
    </el-button>
  </el-popconfirm>
  <!-- </el-tooltip> -->
</template>

<script>
import globalProps from './config'
import { conclude } from 'vue-global-config'

export default {
  name: 'AuthButton',
  props: {
    name: {
      type: String
      //required: true // undefined 时报错
    },
    show: {
      validator: value =>
        ['boolean', 'function'].includes(typeof value) || value === ''
    },
    elPopconfirmProps: Object,
    elTooltipProps: Object,
    // 是否显示文字
    isText: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      authorized: false,
      isWithinTable: false
    }
  },
  mounted () {
    // 是否在el-table表格中
    this.isWithinTable =
      this.isText || this.$parent.$el?.className.includes('el-table')
  },
  computed: {
    // 是否在el-table表格中 , 有bug，获取不到$parent.$el
    // isWithinTable () {
    //   return this.isText || this.$parent.$el?.className.includes('el-table')
    // },
    ElButtonProps () {
      return conclude([
        // 在table中的按钮强制修改为文字按钮
        this.isWithinTable
          ? {
              type: 'text',
              icon: '',
              circle: false
            }
          : {},
        this.$attrs,
        this.presetFromCatalog,
        globalProps.elButtonProps
      ])
    },
    ElPopconfirmProps () {
      const result = conclude([
        this.elPopconfirmProps,
        this.presetFromCatalog.elPopconfirmProps,
        globalProps.elPopconfirmProps
      ])
      return {
        title: this.name,
        disabled: !Boolean(result), // 未配置elPopconfirmProps时默认不启用
        ...result
      }
    },
    ElTooltipProps () {
      return conclude([
        this.elTooltipProps,
        this.presetFromCatalog.elTooltipProps,
        globalProps.elTooltipProps,
        {
          content: this.name,
          placement: 'top',
          openDelay: 400,
          key: this.name,
          // 默认非圆形按钮不显示tooltip
          disabled: !(
            this.$attrs.circle !== undefined ||
            this.presetFromCatalog.circle ||
            globalProps.circle ||
            false
          )
        }
      ])
    },
    presetFromCatalog () {
      return (
        {
          新增: {
            type: 'primary',
            icon: 'el-icon-circle-plus-outline'
          },
          查看: {
            icon: 'el-icon-search',
            circle: true
          },
          编辑: {
            type: 'primary',
            icon: 'el-icon-edit',
            circle: true
          },
          停用: {
            type: 'warning',
            icon: 'el-icon-video-pause',
            circle: true,
            elPopconfirmProps: {}
          },
          启用: {
            type: 'success',
            icon: 'el-icon-video-play',
            circle: true,
            elPopconfirmProps: {}
          },
          删除: {
            type: 'danger',
            icon: 'el-icon-delete',
            circle: true,
            elPopconfirmProps: {}
          },
          ...globalProps.catalog
        }[this.name] || {}
      )
    },
    Show () {
      return conclude([this.show, globalProps.show, false])
    }
  },
  watch: {
    Show () {
      this.verify()
    }
  },
  created () {
    this.verify()
  },
  updated () {
    this.verify()
  },
  methods: {
    onElButtonClick (e) {
      if (this.ElPopconfirmProps.disabled) {
        this.$emit('click', e)
      }
    },
    async verify () {
      if (this.Show) {
        let authorized
        if (typeof this.Show === 'function') {
          const result = this.Show(this.name)
          authorized = result instanceof Promise ? await result : result
          if (authorized === true) {
            this.authorized = true
            return
          }
        } else if (this.Show === true) {
          this.authorized = true
          return
        }
      }
      this.authorized = false
    }
  }
}
</script>

<!--<style lang="scss">
.el-popconfirm__main {
  margin-top: 5px;
}
</style>-->

<style lang="scss" scoped>
.auth-button {
  margin-right: 8px;

  &:not(:first-of-type) {
    margin-left: 10px;
  }

  &.is-circle {
    // 固定原型按钮尺寸
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;

  }

  & :deep(.el-popconfirm__main) {
    font-size: 18px;
    margin: 8px 8px 16px 8px;
  }
}
</style>
